const utils = {
/**
 * 获取元素的最终样式值
 * @param {DOMObject} ele  要获取属性的DOM对象
 * @param {string}    attr 要获取的属性名
 * @return {string}   attr样式的值
 */
getStyle (ele, attr) {
    if (ele.currentStyle) {
        // IE
        return ele.currentStyle[attr]
    } else {
        return getComputedStyle(ele, false)[attr]
    }
},

/**
 * 
 * 添加事件监听
 * @param {DOMObject} ele         要添加监听的DOM元素
 * @param {string}    type        事件名称（不带on）
 * @param {function}  fn          事件处理函数
 * @param {boolean}   [isCapture] 可选参数，是否捕获，默认为false（冒泡），true代表捕获阶段
 */
 on (ele, type, fn, isCapture) {
    // 默认值false
    if (isCapture === undefined) isCapture = false
    if (window.attachEvent) {
        ele.attachEvent('on' + type, fn)
    } else {
        ele.addEventListener(type, fn, isCapture)
    }
},

/**
 * 移除事件监听
 * @param {DOMObject} ele         要添加监听的DOM元素
 * @param {string}    type        事件名称（不带on）
 * @param {function}  fn          事件处理函数
 * @param {boolean}   [isCapture] 可选参数，是否捕获，默认为false（冒泡），true代表捕获阶段
 */
off (ele, type, fn, isCapture) {
    if (isCapture === undefined) isCapture = false
    if (window.detachEvent) {
        ele.detachEvent('on' + type, fn)
    } else {
        ele.removeEventListener(type, fn, isCapture)
    }
},

/**
 * 元素的匀速运动
 * @param {DOMObject} ele  运动的DOM元素
 * @param {string} attr 运动的属性名
 * @param {number} end 运动的终点值，单位px
 * @param {number} duration 运动的总时间，单位ms0 
 * @param {boolean} [fn] 运动结束后的回调函数
 */

 move (ele, attr, end, duration, fn) {
    //获得起始位置
    var start =parseInt(this.getStyle(ele, attr))
    //计算总距离
    var distance = end - start
    //计算总步数
    var steps = parseInt(duration / 20)
    //计算速度
    var speed = distance / steps

    clearInterval(ele.timer)
    var n = 0
    ele.timer = setInterval(function () {
        n++
        ele.style[attr] = start + n*speed + 'px'
        if(n ===steps) {
            clearInterval(ele.timer)
            ele.style[attr] = end + 'px'
            fn && fn()
        }
    },20)
},


/**
 * 实现元素的缓冲运动
 * @param {DOMObject} ele 运动的DOM元素
 * @param {string} attr 运动的属性名
 * @param {numbe} end  运动的结束位置
 * @param {function} [fn]  运动结束之后的回调函数
 */
 move1 (ele, attr, end, fn) {
    end = parseInt(end) //结束位置取整，消除小数

    //获得起始位置
    var start = parseInt(this.getStyle(ele, attr))
    //开启定时器之前先把上一次的清除
    clearInterval(ele.timer)
    //用定时器获得每次移动的距离

   ele.timer = setInterval(function () {
        // 计算剩余的总距离
        var distance = end - start

        //计算速度
        //速度如果是正向运动向上取整，负向运动向下取整

        var speed = distance > 0 ? Math.ceil(distance / 10) : Math.floor(distance / 10)

        //当前的位置往前走，加上一个speed

        start += speed

        //让元素向前走一步
        ele.style[attr] = start + 'px'

        //判断终点
        if ( start === end) {
            clearInterval(ele.timer)
            fn && fn()
        } 
    },20)
}


}